<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<script src="echarts.min.js"></script>
</head>
<body>
<div id="div" style="height: 500px;width: 100%"></div>
<script>

    function dotChart(){
        var nodeDom = document.getElementById('div');
        var dotChart = echarts.init(nodeDom);

        var option = {
            title: {
                text: '单品售罄',
                left: 'center'
            },
            legend: {
                data: ['售罄时间', '补货时间'],
                bottom: 0,
                left: 'center',
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params){
				console.log(params);
				var data = params.data;
				if( data.itemStyle && data.itemStyle.normal && data.itemStyle.normal.opacity==0){
					return;
				}
				return params.seriesName+" "+data.value[0]+" "+data.time;
				}
            },
            xAxis: {
			type : 'category',
			max: 7,
                splitLine: {
                    show:true
                },
                boundaryGap: false,
                data : ['9/1', '9/2', '9/3', '9/4', '9/5', '9/6', '9/7']
            },
            yAxis: {
				max: 24,
                splitLine: {
                    show:true
                },
                boundaryGap: false
            },
            series: [
                {   name:'售罄时间',
                    type: 'scatter',
                    itemStyle:{
                        normal:{
                            color:'#ed7d31'
                        }
                    },
                    data:[
						{value:[ '9/1',0],time:"2:30",itemStyle:{normal:{opacity:0}}},
						{value:[ '9/1',2.5],time:"2:30"},
                        [  '9/2',  9.5],
                        [  '9/3',  11.2],
                        [  '9/4',  12],
                        [  '9/5',  13],
                        [  '9/6',  14],
                        [  '9/6',  24]
                    ]
                },
                {
                    name:'补货时间',
                    type: 'scatter',
                    itemStyle:{
                        normal:{
                            color:'#5b9bd5'
                        }
                    },
                    data:[
                        [  '9/2',  1],
                        [  '9/2',  2],
                        [  '9/3',  3],
                        [  '9/4',  4],
                        [  '9/5',  5],
                        [  '9/6',  6],
                        [  '9/6',  7]
                    ]
                }
            ]
        };
        dotChart.setOption(option);
    }
    dotChart();
</script>
</body>
</html>